Fly-Out-Menu

Posted on by Enno Wulff

Related Post

Ein Fly-Out-Mechanismus auf dem Selektionsbild mithilfe von HTML und entsprechenden Events. Fährt man mit der Maus über einen der drei angebotenen Kästen, so fährt der Docker-Control aus und zeigt eine Auswahl an optionen, die ins Selektionsbild übernommen werden können.

Beschreibung

Im folgenden Coding wird im Docker eine HTML-Seite angezeigt, die mittels des Javascript-Befehls OnMouseOver ein Event an SAP absetzt. Im SAP wird darauf mit einer Vergrößerung des Docking-Containers reagiert.

Wählt man einen Wert aus, so wird dieser in das Selektionsbild übernommen und der Docking-Container wird wieder verkleinert.

Ein OnMouseOver – OnMouseOut war leider nicht möglich, da beim Vergrößern des Docking-Containers automatisch ein “OnMouseOut” gesendet wird. Der Container würde also sofort wieder verkleinert, ohne dass man ein Auswahl treffen könnte.

Zusätzliche Info: Scrollbars

Mit diesem Zusatz im BODY-Tag ist es möglich, den – in diesem Fall – immer sichtbaren vertikalen Scrollbalken nur dann zu aktivieren, wenn er wirklich nötig ist:

<BODY style=”overflow:auto;”>

So sieht’s aus

So ist das Fly-Out-Menu eingeklappt. Der Benutzer sieht nur die “Kategorien”

Und hier wurde mit der Maus auf “Zahlen” gezeigt und das Menu klappt aus:

Coding

REPORT z_fly_out_menu.

*** Data
DATA: cl_docker         TYPE REF TO cl_gui_docking_container.
CONSTANTS c_dock_open   TYPE i VALUE 400.
CONSTANTS c_dock_close  TYPE i VALUE 180.

*** Selection screen
PARAMETERS: p_field     TYPE char10 DEFAULT ‘3333’.

INITIALIZATION.
PERFORM create_objects.

*———————————————————————-*
*       CLASS lcl_event_receiver DEFINITION
*———————————————————————-*
CLASS lcl_event_receiver DEFINITION.
PUBLIC SECTION.

    CLASS-METHODS:  handle_sapevent
FOR EVENT sapevent OF cl_gui_html_viewer
IMPORTING action
frame
getdata
postdata
query_table.
ENDCLASS.                    “lcl_event_receiver DEFINITION

*———————————————————————-*
*       CLASS lcl_event_receiver IMPLEMENTATION
*———————————————————————-*
CLASS lcl_event_receiver IMPLEMENTATION.
METHOD handle_sapevent.

    IF action+1 IS NOT INITIAL.
*** set value
      p_field = action+1.
*** close docker
      CALL METHOD cl_docker->set_extension
EXPORTING
extension = c_dock_close.
ELSE.
CASE action(1).
WHEN ‘1’.
*** Open Docker
          CALL METHOD cl_docker->set_extension
EXPORTING
extension = c_dock_open.
WHEN ‘2’.
*** Close docker
          CALL METHOD cl_docker->set_extension
EXPORTING
extension = c_dock_close.
ENDCASE.
ENDIF.
ENDMETHOD.                    “handle_sapevent

ENDCLASS.                    “lcl_event_receiver IMPLEMENTATION

*&———————————————————————*
*&      Form  CREATE_OBJECTS
*&———————————————————————*
FORM create_objects .

  DATA: t_events        TYPE cntl_simple_events,
wa_event        LIKE LINE OF t_events,
event_receiver  TYPE REF TO lcl_event_receiver,
t_html          TYPE STANDARD TABLE OF text8192 WITH NON-UNIQUE DEFAULT KEY,
html            LIKE LINE OF t_html,
url             TYPE text1000,
zahl            TYPE text10,
cl_html         TYPE REF TO cl_gui_html_viewer.

*** create docker
CREATE OBJECT cl_docker
EXPORTING
extension               = c_dock_close
side                    = cl_gui_docking_container=>dock_at_right
no_autodef_progid_dynnr = ‘X’.

*** create HTML
CREATE OBJECT cl_html
EXPORTING
parent = cl_docker.

*** Register SAPEVENT
CALL METHOD cl_html->get_registered_events
IMPORTING
events = t_events.
wa_event-eventid    = cl_gui_html_viewer=>m_id_sapevent.
wa_event-appl_event = ‘X’.
READ TABLE t_events TRANSPORTING NO FIELDS
WITH KEY eventid = wa_event-eventid.
IF sy-subrc <> 0.
APPEND wa_event TO t_events.
ENDIF.

  CALL METHOD cl_html->set_registered_events
EXPORTING
events = t_events.
SET HANDLER lcl_event_receiver=>handle_sapevent FOR cl_html.

*** Build HTML-Code
  CONCATENATE  ‘<html>’
‘<head><title>Test</title>’
‘<script type=”text/javascript”>’
‘ function OutOfSAPTimerStart(element) {‘
‘  location.href = “SAPEVENT:”+element;’
‘ }’
‘</script>’

               ‘</head>’
‘<body style=”overflow:auto;”>’ “Scroll bars auto”
‘<table border=”0″ width=”300px”>’
‘<tr><td  onmouseover=”OutOfSAPTimerStart(”1”);” width=”150px” bgcolor=”#FF2200″><h1>Zahlen</h1></td>’
‘<td><p>Bitte wählen Sie eine Zahl aus!</p></td></tr>’
‘<td></td><td><a href=”#” onClick=”OutOfSAPTimerStart(” Eins”);”><p>Eins</p></a></td></tr>’
‘<td></td><td><a href=”#” onClick=”OutOfSAPTimerStart(” Zwei”);”><p>Zwei</p></a></td></tr>’
‘<td></td><td><a href=”#” onClick=”OutOfSAPTimerStart(” Drei”);”><p>Drei</p></a></td></tr>’

               ‘<tr><td  onmouseover=”OutOfSAPTimerStart(”1”);” bgcolor=”#22FF00″><h1>Zeichen</h1></td>’
‘<td><p>Bitte wählen Sie ein Zeichen aus!</p></td></tr>’
‘<td></td><td><a href=”#” onClick=”OutOfSAPTimerStart(” A”);”><p>Ah</p></a></td></tr>’
‘<td></td><td><a href=”#” onClick=”OutOfSAPTimerStart(” B”);”><p>Beh</p></a></td></tr>’
‘<td></td><td><a href=”#” onClick=”OutOfSAPTimerStart(” C”);”><p>Ceh</p></a></td></tr>’
‘<tr><td  onmouseover=”OutOfSAPTimerStart(”1”);” bgcolor=”#0022FF”><h1>Tiere</h1></td>’
‘<td><p>Bitte wählen Sie ein Tier aus!</p></td></tr>’
‘<td></td><td><a href=”#” onClick=”OutOfSAPTimerStart(” Elefant”);”><p>Elefant</p></a></td></tr>’
‘<td></td><td><a href=”#” onClick=”OutOfSAPTimerStart(” Maus”);”><p>Maus</p></a></td></tr>’
‘<td></td><td><a href=”#” onClick=”OutOfSAPTimerStart(” Hahn”);”><p>Hahn</p></a></td></tr>’
‘<tr height=”60px”><td><h1></h1></td>’
‘<tr><td><h1></h1></td>’
‘<td><a href=”#” onClick=”OutOfSAPTimerStart(”2”);”><p>Abbruch</p></a></td></tr>’
‘</table>’
‘</body>’
‘</html>’
INTO html.

  APPEND html TO t_html.

*** load HTML
  CALL METHOD cl_html->load_data
IMPORTING
assigned_url = url
CHANGING
data_table   = t_html.

*** Show HTML page
  CALL METHOD cl_html->show_url
EXPORTING
url = url.

ENDFORM.                    ” CREATE_OBJECTS

 

 

Enno Wulff
Letzte Artikel von Enno Wulff (Alle anzeigen)